<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="itemList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="实例" prop="instance.title"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click='editBtn(scope.row)' size="mini">编辑</el-button>
          <el-button @click='delBtn(scope)' size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>

    <el-dialog title="编辑" :visible.sync="showDialog" width="80%">
      <sel-items :selItems="itemList"></sel-items>
    </el-dialog>
  </section>
</template>

<script>
  import selItems from '../examineType/selType'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  import SelItem from "./selItem";
  export default {
    name: "itemOfExamineDefine",
    components: {selItems},
    data(){
      return{
        currItem:null,
        itemList:null,
        totalPage:0,
        showDialog:false,
        filterObj:{}
      }
    },
    computed:{
      examineDefineId(){
        return this.$route.params.id
      },
      ...mapGetters(['department']),
    },
    created(){
      this.getItems()
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getItems(val-1,this.filterObj)
      },
      getItems(pageNo,filterObj){
        this.fetch({name:"getExamineDefineItemList",data:{page:pageNo?pageNo:0,examineDefineId:this.examineDefineId,departmentId:this.department.id,...filterObj}})
          .then(res=>{
            console.log('当前体检定义--------',res)
            this.itemList=[]
            this.totalPage=res.totalPages
            this.showDialog=false
            this.getInstance(res.content)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getInstance(array){
        this.fetch({name:"getInstance",data:{instanceId:array[0].data.instanceId}})
          .then(res=>{
            console.log('当前实例--------',res)
            this.itemList.push({...array[0],instance:res})
            array.splice(0,1)
            if(array.length>0){
              this.getInstance(array)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){
        this.showDialog=true
      }
    }
  }
</script>

<style scoped>

</style>
